@page "/Stacked_Column_Chart"
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient



<Tabs>
    <TabPane Key="1" Tab="Sample 1">
        <AntDesign.Charts.Column Config="config1" OnFirstRender="OnFirstRender" />
    </TabPane>
</Tabs>

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <AntDesign.Charts.Column @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }

    private async void OnFirstRender(IChartComponent chart1)
    {
        var data1 = await DemoData.StackColumnDataAsync(NavigationManager, HttpClient);
        await chart1.ChangeData(data1);
    }

    #region 示例1
    ColumnConfig config1 = new ColumnConfig()
    {
        Padding = "auto",
        IsStack = true,
        XField = "year",
        YField = "value",
        SeriesField = "type",
        Label = new ColumnViewConfigLabel()
        {
            Position = "middle",
            Layout = new []
            {
                new LayoutType()
                {
                    Type = "interval-adjust-position"
                },
                new LayoutType()
                {
                    Type = "interval-hide-overlap"
                },
                new LayoutType()
                {
                    Type = "adjust-color"
                }
            }
        }
    };
    #endregion
}

